<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="orderAfterId"
        label="售后编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orderId"
        label="订单编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="orderRemarks"
        label="订单备注"
        width="120">
      </el-table-column>
      <el-table-column
        prop="payTime"
        label="支付时间"
        :formatter="dateFormatter"
        width="120" >
      </el-table-column>
      <el-table-column
        prop="spuMoney"
        label="支付金额"
        width="120">
      </el-table-column>
      <el-table-column
        prop="userId"
        label="下单用户编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="下单用户名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="收件人手机号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="addresseee"
        label="收件人姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="logisticslId"
        label="物流编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="logisticslCode"
        label="物流公司缩写"
        width="120">
      </el-table-column>
      <el-table-column
        prop="spuName"
        label="商品名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="skuName"
        label="商品规格"
        width="120">
      </el-table-column>
      <el-table-column
        prop="skuImg"
        label="规格图片"
        width="120">
        <template slot-scope="scope">
          <img style="height: 80px" :src="scope.row.skuImg">
        </template>
      </el-table-column>
      <el-table-column
        prop="orderAfterType"
        label="售后类型"
        width="120" :formatter="typeFormatter">
      </el-table-column>
      <el-table-column
        prop="orderAfterStatus"
        label="状态"
        width="120" :formatter="statusFormatter">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <p>
          <el-button
            size="mini" v-show="scope.row.orderAfterStatus==0" @click="handleOrderAfter(scope.row,1)">同意
          </el-button>
          </p>
          <p>
          <el-button
            size="mini" v-show="scope.row.orderAfterStatus==0" @click="handleOrderAfter(scope.row,-1)">不同意
          </el-button>
          </p>
          <p>
          <el-button
            size="mini" @click="look(scope.row)">查看
          </el-button>
          </p>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog :visible.sync="dialogVisible" title="设置商品参数">
      <el-form
        ref="attributeForm"
        :model="orderAfterForm"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 700px; margin-left:50px;">
        <el-form-item label="售后ID" prop="orderAfterId">
          <el-input v-model="orderAfterForm.orderAfterId"/>
        </el-form-item>
       <!-- <el-form-item label="用户编号" prop="userId">
          <el-input v-model="orderAfterForm.userId"/>
        </el-form-item>-->
        <el-form-item label="订单编号" prop="orderId">
          <el-input v-model="orderAfterForm.orderId"/>
        </el-form-item>
        <el-form-item label="规格名称" prop="skuName">
          <el-input v-model="orderAfterForm.skuName"/>
        </el-form-item>
        <el-form-item label="售后类型" prop="orderAfterType">
          <el-input :value="orderAfterTypeFormatter(orderAfterForm.orderAfterType)"/>
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="orderAfterForm.userName"/>
        </el-form-item>
        <el-form-item label="商品名称" prop="spuName">
          <el-input v-model="orderAfterForm.spuName"/>
        </el-form-item>
        <el-form-item label="规格图片" prop="skuImg">
          <img v-if="orderAfterForm.skuImg" :src="orderAfterForm.skuImg" class="avatar">
        </el-form-item>
        <el-form-item label="申请备注信息" prop="orderRemark">
          <el-input v-model="orderAfterForm.orderRemark"/>
        </el-form-item>
        <el-form-item label="申请配图a" prop="orderPictureA">
          <img v-if="orderAfterForm.orderPictureA" :src="orderAfterForm.orderPictureA" class="avatar">
        </el-form-item>
        <el-form-item label="申请配图b" prop="orderPictureB">
          <img v-if="orderAfterForm.orderPictureB" :src="orderAfterForm.orderPictureB" class="avatar">
        </el-form-item>
        <el-form-item label="申请配图c" prop="orderPictureC">
          <img v-if="orderAfterForm.orderPictureC" :src="orderAfterForm.orderPictureC" class="avatar">
        </el-form-item>
        <el-form-item label="退款金额" prop="orderAfterMoney">
          <el-input v-model="orderAfterForm.orderAfterMoney"/>
        </el-form-item>
        <el-form-item label="状态" prop="orderAfterStatus">
          <el-input :value="orderAfterStatusFormatter(orderAfterForm.orderAfterStatus)"/>
        </el-form-item>
        <el-form-item label="未同意次数" prop="orderCount">
          <el-input v-model="orderAfterForm.orderCount"/>
        </el-form-item>
        <el-form-item label="申请售后时间" prop="orderAfterCreateTime">
          <el-input :value="dialogDateFormatter(orderAfterForm.orderAfterCreateTime)"/>
        </el-form-item>
        <el-form-item label="商家处理时间" prop="orderAfterMarchantHandleTime">
          <el-input :value="dialogDateFormatter(orderAfterForm.orderAfterMarchantHandleTime)"/>
        </el-form-item>
        <el-form-item label="店铺编号" prop="merchantId">
          <el-input v-model="orderAfterForm.merchantId"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="orderAfterForm.phone"/>
        </el-form-item>
        <el-form-item label="收件人" prop="addresseee">
          <el-input v-model="orderAfterForm.addresseee"/>
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-input :value="dialogDateFormatter(orderAfterForm.payTime)"/>
        </el-form-item>
        <el-form-item label="商品单价" prop="spuMoney">
          <el-input v-model="orderAfterForm.spuMoney"/>
        </el-form-item>
        <el-form-item label="成交价格" prop="orderMoney">
          <el-input v-model="orderAfterForm.orderMoney"/>
        </el-form-item>
        <el-form-item label="收货地址" prop="shippingAddress">
          <el-input v-model="orderAfterForm.shippingAddress"/>
        </el-form-item>
        <el-form-item label="订单备注" prop="orderRemarks">
          <el-input v-model="orderAfterForm.orderRemarks"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        currentItem: {},
        orderAfterForm:{
          skuName:'',
          orderAfterId:'',
          userId:'',
          orderId:'',
          orderAfterType:'',
          orderRemark:'',
          orderPictureA:'',
          orderPictureB:'',
          orderPictureC:'',
          orderAfterMoney:'',
          orderAfterStatus:'',
          orderCount:'',
          orderAfterCreateTime:'',
          orderAfterMarchantHandleTime:'',
          merchantId:'',
          skuImg:'',
          phone:'',
          addresseee:'',
          payTime:'',
          spuMoney:'',
          orderMoney:'',
          spuName:'',
          userName:'',
          shippingAddress:'',
          orderRemarks:'',
        }
      }
    },
    created() {
      this.getData();
    },
    methods: {

      /*处理售后*/
          handleOrderAfter(row,value){
          this.$axios({
            method: "post",
            url: "http://localhost:8201/orderAfter/handleOrderAfter",
            params:{
              orderAfterId:row.orderAfterId,
              orderAfterStatus:value
            }
        }).then(result => {
          this.getData();

        })
      },


      orderAfterStatusFormatter(value){
        console.log(value);
        if(value==0){
          return "未处理"
        }else if(value==-1){
          return "未同意"
        }else if(value==1){
          return "已同意"
        }
      },

      orderAfterTypeFormatter(value){
        if(value==0){
          return "仅退款"
        }else if(value==1){
          return "换货"
        }else if(value==2){
          return "退款退货"
        }
      },

      dialogDateFormatter(value){
        return moment(value).format("YYYY-MM-DD HH:mm:ss")
      },

      dateFormatter(row,column){
        var date = row[column.property];
        if(date === undefined){
          return ''
        } ;
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },

      typeFormatter(value){
        if(value.orderAfterType==0){
          return "仅退款"
        }else if(value.orderAfterType==1){
          return "换货"
        }else if(value.orderAfterType==2){
          return "退款退货"
        }
      },

      statusFormatter(value){
        if(value.orderAfterStatus==0){
          return "未处理"
        }else if(value.orderAfterStatus==-1){
          return "已拒绝"
        }else if(value.orderAfterStatus==1){
          return "已同意"
        }
      },

      getData() {
        this.$axios.get("http://127.0.0.1:8201/orderAfterView").then(response => {
          console.log(response)
          this.tableData = response.data.records;
        })
      }, look(item) {
        console.log(item)
        this.currentItem = item;
        this.dialogVisible = true;
        this.orderAfterForm=item;

      }
    }
  }
</script>
